<template>
  <div class="trapezoid-carousel">
    <!-- 梯形容器 -->
    <div class="right-angle-trapezoid" :style="trapezoidStyle">
      <!-- 背景层 + 遮罩 -->
      <div class="background-layer" :style="backgroundStyle">
        <div class="overlay"></div>
      </div>

      <!-- 轮播内容 -->
      <el-carousel
          ref="carousel"
          :interval="interval"
          height="100%"
          arrow="never"
          indicator-position="none"
          @change="handleCarouselChange"
      >
        <el-carousel-item v-for="(item, index) in items" :key="index">
          <div class="slide-content">
            <h3 class="slide-title">{{ item.title }}</h3>
            <p class="slide-desc">{{ item.description }}</p>
            <button class="elegant-btn">了解更多</button>
          </div>
        </el-carousel-item>
      </el-carousel>

      <!-- 自定义切换图标 -->
      <div class="custom-arrows">
        <div class="arrow prev" @click="prevSlide">
          <el-icon><ArrowLeft /></el-icon>
        </div>
        <div class="arrow next" @click="nextSlide">
          <el-icon><ArrowRight /></el-icon>
        </div>
      </div>
    </div>

    <!-- 自定义指示器 -->
    <div class="custom-indicators">
      <div
          v-for="(item, index) in items"
          :key="index"
          class="indicator"
          :class="{ active: activeIndex === index }"
          @click="goToSlide(index)"
      ></div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'

const props = defineProps({
  items: {
    type: Array,
    default: () => [
      {
        title: '科技创新',
        description: '探索前沿科技，引领行业发展',
        bgImage: 'https://tt-kiku-pic.oss-cn-beijing.aliyuncs.com/officialWebSite/072ceac289ebb4c8860a6cd96bc351d1.jpg'
      },
      {
        title: '生态环保',
        description: '践行绿色发展，共建美丽家园',
        bgImage: 'https://tt-kiku-pic.oss-cn-beijing.aliyuncs.com/officialWebSite/R.jpg'
      },
      {
        title: '社会责任',
        description: '回馈社会，创造共享价值',
        bgImage: 'https://tt-kiku-pic.oss-cn-beijing.aliyuncs.com/officialWebSite/ea98bce0gy1hvddlpiiwyj22yo1o0u0y.jpg'
      }
    ]
  },
  interval: { type: Number, default: 5000 },
  skewAngle: { type: Number, default: 60 } // 梯形斜切宽度
})

const carousel = ref(null)
const activeIndex = ref(0)

const backgroundStyle = computed(() => ({
  backgroundImage: `url(${props.items[activeIndex.value].bgImage})`
}))

const trapezoidStyle = computed(() => ({
  clipPath: `polygon(0 0, calc(100% - ${props.skewAngle}px) 0, 100% 100%, 0 100%)`
}))

const handleCarouselChange = (index) => {
  activeIndex.value = index
}

const goToSlide = (index) => {
  carousel.value.setActiveItem(index)
}

const prevSlide = () => {
  carousel.value.prev()
}

const nextSlide = () => {
  carousel.value.next()
}
</script>

<style scoped>
.trapezoid-carousel {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  padding: 60px 0;
}

.right-angle-trapezoid {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
  border-radius: 0 0 0 12px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.background-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 1;
  transition: background-image 1s ease;
}

.overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
}

:deep(.el-carousel),
:deep(.el-carousel__container) {
  height: 100%;
}

.slide-content {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 15%;
  color: white;
}

.slide-title {
  font-size: 2.5rem;
  margin-bottom: 20px;
  font-weight: 600;
}

.slide-desc {
  font-size: 1.2rem;
  margin-bottom: 30px;
  max-width: 600px;
}

/* 高级简约按钮 */
.elegant-btn {
  background: transparent;
  border: 1px solid #fff;
  border-radius: 24px;
  padding: 10px 28px;
  font-size: 15px;
  color: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
}
.elegant-btn:hover {
  border-color: #409EFF;
  color: #409EFF;
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

/* 自定义切换图标 */
.custom-arrows {
  position: absolute;
  right: 20px;
  bottom: 20px;
  display: flex;
  gap: 15px;
  z-index: 4;
}
.arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}
.arrow:hover {
  background: rgba(255, 255, 255, 0.5);
  transform: scale(1.1);
}
.arrow .el-icon {
  font-size: 22px;
  color: white;
}

/* 自定义指示器 */
.custom-indicators {
  display: flex;
  justify-content: center;
  margin-top: 30px;
  gap: 12px;
}
.indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all 0.3s ease;
}
.indicator.active {
  width: 36px;
  border-radius: 6px;
  background: #409EFF;
}

/* 响应式 */
@media (max-width: 768px) {
  .right-angle-trapezoid {
    height: 300px;
  }
  .slide-content {
    padding: 0 10%;
    align-items: center;
    text-align: center;
  }
  .slide-title {
    font-size: 1.8rem;
  }
  .slide-desc {
    font-size: 1rem;
  }
  .custom-arrows {
    right: 10px;
    bottom: 10px;
  }
  .arrow {
    width: 36px;
    height: 36px;
  }
  .arrow .el-icon {
    font-size: 18px;
  }
}
</style>
